<template>
  <div class="article-box">
    <article-card v-for="articleInfo in state.articleList" :key="articleInfo.id" class="article-item"
                  :article-info="articleInfo" @click="router.push({name:'article',params:{id:articleInfo.id}})"/>
  </div>
</template>

<script setup lang="ts">
import ArticleCard from "@/components/article/articleCard.vue";
import {onMounted, reactive, Ref, ref} from "vue";
import {ArticleInfo} from "@/entity/article/article";
import router from "@/router";
import {GetArticleList} from "@/service/article";
import {BusinessCode} from "@/lang/Common";
import {PageInfo} from "@/entity/net";

interface State {
  articleList: Ref<ArticleInfo[]>;
}

const states: State = {
  articleList: ref([])
};

const state = reactive(states);

const list = (page: PageInfo) => {
  GetArticleList(page).then(res => {
    if (res?.data?.code == BusinessCode.Ok) {
      state.articleList.push(...res.data.data);
      console.log(states.articleList);
    }
  });
};

onMounted(() => {
  list({page: 1, size: 10, desc: 0});
});


</script>

<style scoped>


.article-box {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  justify-content: center;
}

.article-item:hover {
  background: rgb(250, 250, 250);
  cursor: pointer;
}
</style>